{% extends 'TopxiaWebBundle::layout.html.twig' %}

{% block title %} {{'支付中心'|trans}} - {{ parent() }}{% endblock %}
{% set script_controller = 'pay/select' %}
{% block esBar %}
{% endblock %}
{% block content %}
<div class="order-pay">

  <div class="es-section">
    <ul class="es-step es-step-3 clearfix">
      <li class="done"><span class="number"><i class="es-icon es-icon-done"></i></span>{{'订单确认'|trans}}</li>
      <li class="doing"><span class="number">2</span>{{'订单支付'|trans}}</li>
      <li><span class="number">3</span>{{'订单完成'|trans}}</li>
    </ul>
    <div class="order-pay-body">
      <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
        {{'订单已提交，请在４８小时内完成支付！逾期订单将被取消。'|trans}}
      </div>

      {{ render(controller(template , {'sn':sn})) }}

      <div class="es-piece" style="margin-bottom:20px;"><div class="piece-header">{{'支付方式'|trans}}</div></div>
      <form class="form-paytype" method="post" action="{{path('pay_center_pay')}}">
        <input type="hidden" name="targetType" value="{{order.targetType}}">
        <input type="hidden" name="orderId" value="{{order.id}}"/>
        
        {% set activePayment = order.payment|default(firstEnabledPayment.name|default('')) %}
        {% if order.payment == 'none' %}
          {% set activePayment = firstEnabledPayment.name|default('') %}
        {% endif %}

        <input type="hidden" name="payment" value="{{activePayment}}">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token('site') }}">
        {% set cbpay = false %}
        {% set alipay = false %}

        <div class="form-group order-detail-bg">
          {% for payment in payments %}
            {% if payment.name in ['heepay', 'llcbpay'] and payment.enabled == 0 %}
              {% set cbpay = true %}
            {% elseif  payment.name == 'alipay' and payment.enabled == 0 %}
              {% set alipay = true %}
            {% endif %}
              {% if activePayment in ['none', ''] and payment.enabled %}
                {% set activePayment = payment.name %}
              {% endif %}
              <div class="check {% if not payment.enabled %}disabled{% endif %} {% if activePayment == payment.name %}active{% endif %}" id="{{payment.name}}">
                {% set picture = 'assets/img/order/'~payment.name~'.png' %}
                <img src="{{ asset(picture) }}" />
                <span class="icon"></span>
              </div>
          {% else %}
            <div class="pay-type-label text-warning ">{{'支付方式未开启，请联系管理员。'|trans}}</div>
          {% endfor %}
          {% if payAgreements is not empty %}
          <div class="js-pay-agreement" style="display:none">
            <ul class="pay-agreement-list row">
              {% for payAgreement in payAgreements %}
                <li id="unbind-bank-{{payAgreement.id}}" class="col-md-6 js-pay-bank {% if loop.index0 == 0 %}checked{% endif %}">
                  <div class="pay-bank clearfix">
                    <input class="hidden" type="radio" name='payAgreementId' value="{{payAgreement.id}}" {% if loop.index0 == 0 %}checked{% endif %} />
                    <span class="name">{{payAgreement.bankName}}</span>
                    <span class="number">***{{payAgreement.bankNumber}}</span>
                    <span class="hidden-xs">{% if payAgreement.type == 0 %}{{'储蓄卡'|trans}}{% else %}{{'信用卡'|trans}}{% endif %}</span>
                    <a href="javascript:;" class="closed visible-lg" data-url="{{ path('auth_unbind_mobile_show')}}"><i class="es-icon es-icon-icon_close_circle"></i></a>
                  </div>
                </li>
              {% endfor %}
              <li class="col-md-6 js-pay-bank">
                <div class="pay-bank">
                  <input class="hidden" type="radio" name='payAgreementId' value=""/>
                  <span class="color-gray">{{'使用新的银行卡'|trans}}</span>
                </div>
              </li>
            </ul>
          </div>
          {% endif %}
          {% if alipay|default('') or cbpay|default('') %}
              {% if is_micro_messenger() %}
                <p class="color-danger">{{'您正在使用微信浏览，暂不支持其他支付方式'|trans}}</p>
              {% else %}
                <p class="color-danger">{{'若需使用网银支付，请使用IE浏览器'|trans}}</p>
              {% endif %}
          {% endif %}
        </div>
        <div class="form-group">
          <div class="total-price">
            {{'应付金额：'|trans}}
            <span role="pay-rmb" class="pay-rmb">￥{{order.amount}}</span>
          </div>
        </div>
        <div class="form-group text-right">
          {% if targetType in ['course', 'classroom', 'vip'] %}
            {% include 'TopxiaWebBundle:PayCenter:' ~ targetType ~ '-cancelled.html.twig' %}
          {% endif %}
          <button class="pay-button btn btn-primary" {% if  activePayment == '' %}disabled="disabled"{% else %}type="submit"{% endif %} >{{'确认支付'|trans}}</button>
        </div>

      </form>
    </div>
  </div>
</div>
{% endblock %}